<template>
	<view>
		<view class="" v-show="show && !listShow">
			<view class="" style="text-align: center;padding-top: 80rpx;">
				<image style="width: 400rpx;" src="../../static/unlocation.png" mode="widthFix"></image>
			</view>
			<view class="" style="text-align: center;margin-top: 20rpx; color: #a2a2a2; font-size: 24rpx;">
				未开启定位权限,无法为您匹配附近门店
			</view>
			<view class="" style="text-align: center; color: #ADB838;font-size: 24rpx;">
				(请先确认微信的位置权限是否开启)
			</view>
			<view class="" style="text-align: center; margin-top: 60rpx;">
				<u-button hover-class="none" :custom-style="customStyle" size="medium" type="success"
					@click="openSetting">去开启定位信息</u-button>
			</view>
		</view>
		<view class="" v-show="show && listShow" style="margin: 0 auto; width: 100vw;height: 100vh;">
			<u-empty text="当前地区暂未开通店铺哦~" mode="favor"></u-empty>
		</view>
		<view class="" v-show="!show && !listShow" style="margin: 0 auto; width: 100vw;height: 100vh;">

		</view>
		<view class="" style="padding-bottom: 40rpx;" v-show="!show && listShow">
			<view class="" style="padding: 40rpx;padding-bottom: 10rpx;">
				附近门店
			</view>
			<view class="item" v-for="item in list" :key="item.id">
				<u-card :show-head="false" :show-foot="false" @click="select(item)">
					<view class="card_body" slot="body">
						<view class="body_left">
							<view class="body_title">
								{{item.name}}
							</view>
							<view class="distance">
								<view class="distance_icon">
									<u-icon color="#ADB838" name="map"></u-icon>
									<text>{{item.distance}}</text>
								</view>
								<view class="address">
									{{item.address}}
								</view>
							</view>
							<view class="walk">
								步行约:{{item.walking_time}}
							</view>
						</view>
						<view class="body_right">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</u-card>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: "#ADB838"
				}, 
				show: false,
				listShow: false,
				latitude: '',
				longitude: '',
				list: []
			};
		},
		onShow() {
			this.show = false
			this.listShow = false
			this.getseting()
		},
		computed: {
			...mapState(['store'])
		},
		methods: {
			...mapMutations(['SET_STORE', 'clear_cart', 'SET_STATUS']),
			select(e) {
				console.log(e);
				if (e.id != this.store.id) {
					this.SET_STATUS(true)
					this.clear_cart()
					this.SET_STORE(e)
					uni.reLaunch({
						url: '/pages/tarbar/menu'
					})
				}else{
					uni.navigateBack()
				}
				
				// if(Object.keys(this.store).length > 0 && e.id != this.store.id){
				// 	console.log(12453);
				// 	this.SET_STATUS(true)
				// 	this.clear_cart()
				// 	this.SET_STORE(e)
				// 	uni.reLaunch({
				// 		url:'/pages/tarbar/menu'
				// 	})
				// }
				// if(Object.keys(this.store).length == 0){
				// 	console.log(23);
				// 	this.SET_STORE(e)
				// 	uni.switchTab({
				// 		url:'/pages/tarbar/menu'
				// 	})
				// }
				// if( e.id == this.store.id){
				// 	uni.navigateBack()
				// }
			},
			getseting() {
				console.log('回到个人位置');
				uni.showLoading({
					title: "定位中..."
				})
				uni.getSetting({
					success: (res) => {
						console.log(1);
						console.log(res);
						let authSetting = res.authSetting
						if (authSetting['scope.userLocation']) {
							this.show = false
							console.log(2);
							this.getCurrentLocation()
							console.log(1234);
						} else {
							this.show = true
							uni.hideLoading()
						}
					},
					fail: (err) => {
						console.log(err, 999);
						switch (err.errCode) {
							case 1: // 用户拒绝
								// this.showPermissionGuide()
								break
							case 2: // 位置不可用
								uni.showToast({
									title: '无法获取位置信息,请检查设备定位权限',
									icon: 'none',
									duration: 1500
								})
								break
							case 3: // 超时
								uni.showToast({
									title: '定位超时，请重试',
									icon: 'none'
								})
								break
							default:
								console.error('定位错误', err)
						}
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/tarbar/home"
							})
						}, 1500)
					}
				})

			},
			getCurrentLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log("当前坐标信息：", res)
						let e = {
							longitude: res.longitude,
							latitude: res.latitude,
							distance: 20
						}
						this.getShop(e)

					},

				})
			},
			async getShop(e) {
				let res = await this.apiPost('/shop/getNearShop', e)
				console.log(res);
				if (res.data.code == 1) {
					if (res.data.data.length > 0) {
						this.list = res.data.data
						console.log(this.list);
						this.show = false
						this.listShow = true
					} else {
						this.show = true
						this.listShow = true
					}
				} else {
					this.msg(res.data.msg)
				}
				uni.hideLoading()
			},
			openSetting() {
				uni.openSetting()
			}
		}
	}
</script>

<style lang="scss">
	.item {}

	.card_body {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.body_left {
			width: 90%;

			.body_title {
				color: #000;
				font-weight: 500;
			}

			.distance {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 22rpx;
				margin-top: 10rpx;

				.distance_icon {
					margin-right: 20rpx;
					color: #ADB838;
					margin-right: 10rpx;

				}

				.address {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.walk {
				font-size: 22rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>